<template>
    <div id="teamCardList">
        <van-card
            v-for="team in props.teamList"
            :key="team.id"
            :desc="team.description"
            :title="team.name"
            thumb="https://app6882.acapp.acwing.com.cn/api/uploads/1733235689940_%25E6%259C%25AC%25E6%259C%25BA%25E7%2585%25A7%25E7%2589%25871665906279975.png"
        >
            <template #tags>
                <van-tag
                    plain
                    type="primary"
                    style="margin-right: 8px; margin-top: 8px"
                >
                    {{ teamStatusEnum[team.status] }}
                </van-tag>
            </template>
            <template #price>
                <div>{{ '最大人数：' + team.maxNum }}</div>
            </template>
            <template #bottom>
                <div>{{ '过期时间：' + team.expireTime }}</div>
                <div>{{ '创建时间：' + team.createTime }}</div>
            </template>
            <template #footer>
                <van-button type="primary" size="small" @click="doUpdateTeam(team.id)" v-if="team.isCreateByMe">修改队伍</van-button>
                <van-button type="primary" size="small" @click="doDeleteTeam(team.id)" v-if="team.isCreateByMe">解散队伍</van-button>
                <van-button type="primary" size="small" @click="doQuitTeam(team.id)" >退出队伍</van-button>
            </template>
        </van-card>
    </div>
</template>

<script setup lang="ts">
import type { MyTeamType } from '../models/team'
import { teamStatusEnum } from '../constants/team.ts'
import router from '../router'
import { showConfirmDialog, showFailToast } from 'vant'
import myAxios from '../plugins/myAxios.ts'

interface TeamListProps {
    teamList: MyTeamType[]
}

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
const props = withDefaults(defineProps<TeamListProps>(), {
    // eslint-disable-next-line vue/require-valid-default-prop
    teamList: []
})

const doUpdateTeam = (id: number) => {
    router.push({
        path: `/team/update/${id}`,
    })
}

const doDeleteTeam = (id: number) => {
    showConfirmDialog({
        title: '提示',
        message:
            '是否要解散当前队伍',
    })
    .then(async () => {
        // on confirm
        try {
            const res = await myAxios.post("/team/delete", {
                id: id
            })
            if (res['code'] === 0) {
                router.go(0);
            } else {
                showFailToast("解散失败")
            }
        } catch {
            showFailToast("解散失败")
        }
    })
    .catch(() => {
        // on cancel
    });
}

const doQuitTeam = (id: number) => {
    showConfirmDialog({
        title: '提示',
        message:
            '是否要退出当前队伍',
    })
    .then(async () => {
        // on confirm
        try {
            const res = await myAxios.post("/team/quit", {
                id: id,
            })
            if (res['code'] === 0) {
                router.go(0);
            } else {
                showFailToast("解散失败")
            }
        } catch {
            showFailToast("解散失败")
        }
    })
    .catch(() => {
        // on cancel
    });
}

</script>

<style scoped>
#teamCardList :deep(.van-image__img) {
    height: 128px;
    object-fit: unset;
}
</style>
